<template>
  <div class="blank-quest-container">
    <el-input
      v-show="isShow"
      type="textarea"
      :rows="2"
      placeholder="请输入完整内容"
      v-model="textarea"
    >
    </el-input>
    <div class="content-container" v-html="textarea" v-show="!isShow"></div>
    <div class="controls">
      <el-button :disabled="confirmDisabled" @click="confirm" type="primary"
        >确定</el-button
      >
      <el-button :disabled="blankDisable" @click="becomeBlank" type="primary"
        >设置为空</el-button
      >
    </div>
  </div>
</template>

<script>
import { mixin } from "@/mixin";
// 海上升明月，天涯共此时
// TODO:填空题要先有数据，然后先点确定，才能设置为空，而且那里留存了一个重复填空的问题
export default {
  name: "BlankQuestion",
  mixins: [mixin],
  data() {
    return {
      // order: "25",
      isShow: true, //是否展示文本框
      textarea: "",
      confirmDisabled: false,
      questionType: "bl",
      topicTemplate: {
        title: "",
        answer: [],
      },
      order: 0,
      blankDisable: true,
    };
  },
  methods: {
    becomeBlank() {
      // 这里发现检索文字也不保险，除非里面没有重复文字才有可能保险
      const selectText = window.getSelection().toString();
      // console.log(selectText);
      // 这里去做弱化表达
      // 找到那一部分，但是这样可能存在一个问题就是重复，所以
      // 将那一部分重新包装一下
      const manualText = `<span class='blank'>${selectText}</span>`;
      // 替换原来的
      // console.log('oldSaveText: ', oldSaveText);

      this.textarea = this.textarea.replace(selectText, manualText);
      /**
       *
       */
      let oldSaveText =
        this.$store.state.topicAbout.topic.title.length == 0
          ? this.textarea
          : this.$store.state.topicAbout.topic.title;

      oldSaveText = oldSaveText.replace(selectText, manualText);

      // 逻辑
      /**
       * 获取<span class="black">xxx</span>
       * 将其中的span变成input <input class="black" />
       */
      // let oldSaveText = this.$store.state.topicAbout.topic.title;
      const reg = /(<span[\s\S]*?>)[\s\S]*?(<\/span>)/g;
      const saveText = oldSaveText.replace(
        reg,
        `<input data-order="${this.order++}" class="blank_question" />`
      );

      // console.log("saveText: ", saveText);
      // 通过那个设置
      this.$store.commit("topicAbout/SET_CORRECT", selectText);
      this.$store.commit("topicAbout/SET_CURRENTEDITBLOCKTYPE", "title");
      this.$store.commit("topicAbout/SET_TOPIC", saveText);
    },
    confirm() {
      if (this.textarea.length === 0) {
        return;
      }
      this.isShow = false;
      this.confirmDisabled = true;
      this.blankDisable = false;
    },
  },
};
</script>

<style lang='less' scoped>
.blank-quest-container {
  .controls {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content-container {
    padding: 0 10px;
    text-align: justify;
    line-height: 28px;
    text-indent: 2em;
  }
}
</style>